<template>
	<div>
		<van-nav-bar title="修改车辆" left-text="返回" left-arrow @click-left="$router.back()" />
		<div>
			<van-form @submit="onSubmit">
				<!-- 车辆标题图片 -->
				<div style="display: flex; flex-direction: column;">
					<van-tag type="success" mark size="large" style="width: 100px; margin: 5px 0px;">*车辆标题图片</van-tag>
					<div style="display: flex; justify-content: center;" v-show="!showImg.img.length>0">
						<van-uploader v-model="upload.img" :after-read="afterRead" multiple :max-count="1" />
					</div>
					<!-- 显示标题图片和删除按钮 -->
					<div style="display: flex; justify-content: center; align-items: center;"
						v-show="showImg.img.length>0">
						<van-image fit="contain" width="5rem" height="5rem" :src="showImg.img" @click="imgPreview" />
						<van-button type="danger" @click="onImgDelete" style="margin-left: 10px;">删除</van-button>
					</div>
				</div>
				<!-- 车辆基本信息 -->
				<van-tag type="success" mark size="large" style="width: 100px; margin: 5px 0px;">*车辆基本信息</van-tag>
				<div>
					<div style="display: flex;">
						<van-field v-model="usedcar.carBrand" label="*品牌" placeholder="请选择或输入品牌" clearable
							:rules="[{ required: true, message: '请选择或输入品牌' }]" style="width: 80%;" />
						<van-button type="primary" @click="state.showPickerBrand = true" style="width: 20%;">选择
						</van-button>
						<van-popup v-model:show="state.showPickerBrand" round position="bottom">
							<van-picker :columns="columnsBrand" @cancel="state.showPickerBrand = false"
								@confirm="onConfirmBrand" />
						</van-popup>
					</div>
					<van-field v-model="usedcar.carSeries" label="*车系" :rules="[{ required: true, message: '请输入车系' }]"
						placeholder="请输入车系,如: 凯美瑞" clearable />
					<div style="display: flex;">
						<van-field v-model="usedcar.carYear" readonly label="*年款" placeholder="请选择年款" clearable
							:rules="[{ required: true, message: '请选择年款' }]" style="width: 80%;" />
						<van-button type="primary" @click="state.showPickerYear = true" style="width: 20%;">选择
						</van-button>
						<van-popup v-model:show="state.showPickerYear" round position="bottom">
							<van-picker :columns="columnsYear" @cancel="state.showPickerYear = false"
								@confirm="onConfirmYear" />
						</van-popup>
					</div>
					<van-field v-model="usedcar.carDisplacement" label="*发动机"
						:rules="[{ required: true, message: '请输入发动机' }]" placeholder="请输入发动机,如: 2.0T" clearable />
					<van-field v-model="usedcar.carVersion" label="*版本或类型"
						:rules="[{ required: true, message: '请输入版本或类型' }]" placeholder="请输入版本或类型,如: 豪华版" clearable />
					<div>
						<van-field v-model="usedcar.licenseTime" readonly label="*上牌时间" placeholder="请选择上牌时间"
							:rules="[{ required: true, message: '请选择上牌时间' }]" clearable
							@click="state.showPickerTime = true" />
						<van-popup v-model:show="state.showPickerTime" round position="bottom">
							<van-datetime-picker v-model="time.currentDate" type="year-month" title="选择年月"
								:min-date="time.minDate" :max-date="time.maxDate" @cancel="state.showPickerTime = false"
								@confirm="onConfirmTime" />
						</van-popup>
					</div>
					<div style="display: flex;">
						<van-field v-model="usedcar.driveMileage" label="*行驶里程" placeholder="填写数字即可,如: 4.5" clearable>
							<template #input>
								<van-stepper v-model="usedcar.driveMileage" step="0.1" :decimal-length="2" />
								<span style="margin-left: 10px;">万公里(可手动输入)</span>
							</template>
						</van-field>
					</div>
					<div style="display: flex;">
						<van-field v-model="usedcar.transmission" label="*变速箱" placeholder="请选择变速箱,如: 自动" clearable>
							<template #input>
								<van-radio-group v-model="usedcar.transmission" direction="horizontal">
									<van-radio name="自动">自动</van-radio>
									<van-radio name="手动">手动</van-radio>
								</van-radio-group>
							</template>
						</van-field>
					</div>
					<div style="display: flex;">
						<van-field v-model="usedcar.colour" readonly label="*颜色"
							:rules="[{ required: true, message: '请选择颜色' }]" placeholder="请选择颜色" clearable
							@click="state.showPickerColour = true" />
						<van-popup v-model:show="state.showPickerColour" round position="bottom">
							<van-picker :columns="columnsColour" @cancel="state.showPickerColour = false"
								@confirm="onConfirmColour" />
						</van-popup>
					</div>
					<div style="display: flex;">
						<van-field v-model="usedcar.emissionStandard" readonly label="*排放标准" placeholder="请选择排放标准"
							:rules="[{ required: true, message: '请选择排放标准' }]" clearable
							@click="state.showPickerEnvironmental = true" />
						<van-popup v-model:show="state.showPickerEnvironmental" round position="bottom">
							<van-picker :columns="columnsEnvironmental" @cancel="state.showPickerEnvironmental = false"
								@confirm="onConfirmEnvironmental" />
						</van-popup>
					</div>
					<div style="display: flex;">
						<van-field v-model="usedcar.model" readonly label="*车型" placeholder="请选择车型" clearable
							:rules="[{ required: true, message: '请选择车型' }]" @click="state.showPickerType = true" />
						<van-popup v-model:show="state.showPickerType" round position="bottom">
							<van-picker :columns="columnsType" @cancel="state.showPickerType = false"
								@confirm="onConfirmType" />
						</van-popup>
					</div>
					<div style="display: flex;">
						<van-field v-model="usedcar.price" type="number" label="*价格"
							:rules="[{ required: true, message: '请输入价格' }]" placeholder="请输入价格" style="width: 70%;">
							<template #extra>
								<span>万元</span>
							</template>
						</van-field>
					</div>
					<van-field v-model="usedcar.remark" label="说明或备注" type="textarea" rows="3"
						placeholder="请输入其他说明或备注" />
				</div>
				<!-- 车辆其他图片 -->
				<div style="display: flex; flex-direction: column;">
					<van-tag type="success" mark size="large" style="width: 100px; margin: 5px 0px;">车辆其他图片</van-tag>
					<van-uploader v-model="upload.imgs" style="margin: 5px 0px 20px 20px;" />
					<!-- 显示标题图片和删除按钮 -->
					<van-row v-show="showImg.imgs.length>0">
						<template v-for="(img,index) in showImg.imgs" :key="index">
							<div
								style="display: flex; flex-direction: column; justify-content: center; margin-left: 10px;">
								<van-image fit="contain" width="5rem" height="5rem" :src="img"
									@click="imgsPreview(index)" />
								<van-button type="danger" size="small" @click="onImgsDelete(index)">删除</van-button>
							</div>
						</template>
					</van-row>
				</div>
				<!-- 提交按钮 -->
				<van-button round block type="primary" native-type="submit" :disabled="submitButton"
					style="margin-top: 10px;">提交</van-button>
			</van-form>
		</div>
	</div>
</template>

<script>
	//引入图片预览组件
	import {
		ImagePreview
	} from 'vant';
	export default {
		//使用inject导入引用的reload，然后直接调用即可
		inject: ["reload"],
		data() {
			return {
				columnsBrand: ['丰田', '本田', '大众', '马自达', '奔驰', '宝马', '奥迪', '雷克萨斯', '吉利', '比亚迪', '别克', '五菱', '长安', '哈佛',
					'现代', '宝骏'
				],
				columnsYear: ['2010款', '2011款', '2012款', '2013款', '2014款', '2015款', '2016款', '2017款', '2018款', '2019款',
					'2020款', '2021款', '2022款'
				],
				columnsColour: ['黑色', '白色', '灰色', '红色', '橙色', '绿色', '蓝色', '咖啡色', '紫色', '黄色', '其他'],
				columnsEnvironmental: ['国Ⅳ', '国Ⅴ', '国Ⅵ'],
				columnsType: ['微型车', '小型轿车', '中大型轿车', 'SUV', 'MPV', '面包车', '皮卡'],
				state: {
					showPickerBrand: false,
					showPickerYear: false,
					showPickerTime: false,
					showPickerColour: false,
					showPickerEnvironmental: false,
					showPickerType: false
				},
				time: {
					currentDate: new Date(),
					minDate: new Date(2010, 0, 1),
					maxDate: new Date(),
				},
				usedcar: {
					id: 0,
					sellerId: 0,
					carBrand: "丰田",
					carSeries: "亚洲龙",
					carYear: "2018款",
					carDisplacement: "2.0T",
					carVersion: "标准版",
					licenseTime: "2018年7月",
					driveMileage: "5.00",
					transmission: "自动",
					colour: "白色",
					emissionStandard: "国Ⅴ",
					model: "中大型轿车",
					price: "18",
					remark: "",
					img: "",
					imgs: ""
				},
				//上传图片数据
				upload: {
					img: [],
					imgs: []
				},
				//用来显示图片的数据
				showImg: {
					img: "",
					imgs: []
				}

			}
		},
		mounted() {
			//获取商家id
			this.usedcar.sellerId = this.$cookies.get("seller").id

			//获取车辆信息
			let carId = this.$route.query.carId
			if (carId != '' && carId != null) {
				this.usedcar.id = carId
				this.loadUsedcar(carId)
			}
		},
		computed: {
			//提交按钮是否可用
			submitButton() {
				if (this.upload.img.length > 0 || this.showImg.img != "") {
					return false
				}
				return true
			}
		},
		methods: {
			//加载车辆
			loadUsedcar(carId) {
				//根据id查询车辆
				let _this = this;
				_this.$axios({
					method: 'post',
					url: '/usedcar/findUsedcarById',
					data: {
						id: carId
					}
				}).then((resp) => {
					_this.usedcar = resp.data
					_this.showImg.img = resp.data.img
					if (resp.data.imgs.length > 0) {
						_this.showImg.imgs = resp.data.imgs.split(',')
					}

				})
			},
			//选择品牌提交
			onConfirmBrand(value) {
				this.usedcar.carBrand = value
				this.state.showPickerBrand = false
			},
			//选择年款提交
			onConfirmYear(value) {
				this.usedcar.carYear = value
				this.state.showPickerYear = false
			},
			//选择上牌时间
			onConfirmTime(value) {
				this.usedcar.licenseTime = value.getFullYear() + "年" + (value.getMonth() + 1) + "月"
				this.state.showPickerTime = false
			},
			//选择颜色
			onConfirmColour(value) {
				this.usedcar.colour = value
				this.state.showPickerColour = false
			},
			//选择排放标准
			onConfirmEnvironmental(value) {
				this.usedcar.emissionStandard = value
				this.state.showPickerEnvironmental = false
			},
			//选择车辆类型
			onConfirmType(value) {
				this.usedcar.model = value
				this.state.showPickerType = false
			},
			//加载完成图片后的处理(暂时不需要处理)
			afterRead(imgFile) {},
			//提交按钮
			onSubmit() {
				//修改了标题图片
				if (this.upload.img.length > 0) {
					let data = new FormData()
					data.append("sellerId", this.usedcar.sellerId)
					this.upload.img.forEach((e) => {
						data.append("files", e.file)
					})

					let _this = this;
					_this.$axios({
						method: 'post',
						url: '/usedcar/saveImg',
						data: data
					}).then((resp) => {
						if (resp.code == 200) {
							_this.usedcar.img = resp.data
							this.submitUpdateCar()
						}
					})
				}

				//修改了其他图片
				if (this.upload.imgs.length > 0) {
					let data = new FormData();
					data.append("sellerId", this.usedcar.sellerId)
					this.upload.imgs.forEach((e) => {
						data.append("files", e.file)
					})

					let _this = this;
					_this.$axios({
						method: 'post',
						url: '/usedcar/saveImg',
						data: data
					}).then((resp) => {
						if (resp.code == 200) {
							//处理车辆没有其他图片的操作
							if (_this.usedcar.imgs.length > 0) {
								_this.usedcar.imgs = _this.usedcar.imgs + "," + resp.data
								this.submitUpdateCar()
							} else {
								_this.usedcar.imgs = resp.data
								this.submitUpdateCar()
							}
						}
					})
				}

				//标题图片和其他图片都没修改
				if (!this.upload.imgs.length > 0) {
					this.submitUpdateCar()
				}
			},
			//提交修改车辆
			submitUpdateCar() {
				let _this = this;
				_this.$axios({
					method: 'put',
					url: '/usedcar/update',
					data: _this.usedcar
				}).then((resp) => {
					_this.$notify({
						type: "success",
						message: resp.msg
					})
					_this.$router.replace('/home')
				})
			},
			//预览标题图片
			imgPreview() {
				ImagePreview([this.showImg.img])
			},
			//删除标题图片
			onImgDelete() {
				this.$dialog.confirm({
					message: '确定删除此标题图片吗？'
				}).then(() => {
					this.showImg.img = ""
					this.usedcar.img = ""
				}).catch(() => {})
			},
			//预览其他图片
			imgsPreview(index) {
				ImagePreview([this.showImg.imgs[index]])
			},
			//删除其他图片
			onImgsDelete(index) {
				this.$dialog.confirm({
					message: '确定删除此图片吗？'
				}).then(() => {
					//删除图片
					this.showImg.imgs.splice(index, 1)
					//将删除后的数据赋值
					this.usedcar.imgs = this.showImg.imgs.join(",")
				}).catch(() => {})
			}
		}
	}
</script>

<style scoped>
</style>
